.input_control {
    padding: var(--m15) var(--m12);
    background-color: #fff;

    border-radius: var(--m12);

    .input_wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .input {
            display: flex;
            justify-content: center;
            align-items: center;
            height: var(--m20);
            font-size: var(--m15);
            font-weight: 500;
            color: var(--field-text);
            flex: 1;

            span {
                flex: 1;
            }

            .input_ui {
                font-size: var(--m13);
                height: 100%;
                width: 100%;
                color: var(--field-text);
                font-family: 'Montserrat-Regular';
                :global {
                    .MuiInputBase-input {
                        padding: 0;
                    }
                    .MuiInputBase-input::placeholder {
                        font-size: var(--m11);
                        font-family: 'Montserrat-Light';
                        color: var(--placeholder-text);
                    }
                }
            }

            input {
                display: block;
                width: 100%;
                height: 100%;
            }
        }

        .addon {
            display: flex;
            align-items: center;

            .max_length_tip {
                font-family: Montserrat-Light;
                margin-left: var(--m4);
                font-weight: 300;
                font-size: var(--m11);
                /* identical to box height */

                display: flex;
                align-items: center;
                text-align: right;

                /* 亮灰 */

                color: #A5A5AB;
            }

            .clear_icon {
                width: var(--m16);
                height: var(--m16);

                img {
                    width: 100%;
                    height: 100%
                }
            }

            .suffix_icon {
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}

@media screen and(min-width:1280px) {
    .input_control {
        padding: var(--pc15) var(--pc12);
    
        border-radius: var(--pc12);
    
        .input_wrap {
            .input {
                height: var(--pc20);
                font-size: var(--pc15);
    
                .input_ui {
                    font-size: var(--pc13);
                    :global {
                        .MuiInputBase-input {
                            padding: 0;
                        }
                        .MuiInputBase-input::placeholder {
                            font-size: var(--pc11);
                        }
                    }
                }
            }
    
            .addon {
                .max_length_tip {
                    margin-left: var(--pc4);
                    font-size: var(--pc11);
                }
    
                .clear_icon {
                    width: var(--pc16);
                    height: var(--pc16);
                }
            }
        }
    }
}